<template>
    <div class="audit-container">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            clearable
            maxlength="20"
            oninput="value=value.replace(/[^\u4E00-\u9FA5]/g, '');"
            v-model="searchParams.name"
            show-word-limit
            placeholder="讲师名"
            style="width: 180px"/>
        </el-form-item>

        <el-form-item>
          <el-input
            clearable
            oninput = "value=value.replace(/[^\d]/g,'')"
            maxlength="11"
            show-word-limit
            v-model="searchParams.mobile"
            placeholder="手机号码"
            style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchParams.status" clearable placeholder="审核情况" style="width: 120px">
            <el-option :value="0" label="待审核"/>
            <el-option :value="1" label="审核通过"/>
            <el-option :value="2" label="审核不通过"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="date" label="添加时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至 "
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="fetchData()" size="medium">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetData()" size="medium">清空</el-button>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row>

        <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="100" align="center"/>

        <el-table-column prop="mobile" label="手机号" width="150" align="center"/>

        <el-table-column prop="intro" label="资历"/>

        <el-table-column prop="gmtCreate" label="添加时间" width="160" align="center"/>

        <el-table-column prop="status" label="审核情况" width="130" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="brandColor">待审核</el-tag>
            <el-tag v-if="scope.row.status === 1" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status === 2" type="danger">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status === 0 ? false : true" type="primary" size="mini" icon="el-icon-view" @click="handleEdit(scope.row)">修改</el-button>
            <el-button :disabled="scope.row.status === 0 ? false : true" type="success" size="mini" icon="el-icon-edit" @click="handleAudit(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />

      <audit
        :visible="auditDialogVisible"
        :formData="auditMap"
        title="审核讲师"
        @close-callback="closeCallback"/>

      <edit
        :visible="editDialogVisible"
        :formData="editMap"
        title="修改审核详情"
        @close-callback="closeCallback"/>
    </div>
</template>

<script>
  import { getPageList, getAuditById } from '@/api/audit'
  import Audit from '@/views/audit/audit'
  import Edit from '@/views/audit/edit'

  export default {
    components:{ Audit,Edit },
    data(){
      return {
        pickerOptions: {
          //不可选择当天以后日期
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },

          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },]
        },
        listLoading: true, // 是否显示loading信息
        list: null, // 数据列表
        total: 0, // 总记录数
        page: 1, // 页码
        limit: 10, // 每页记录数
        searchParams: {},// 查询条件
        auditDialogVisible: false, //审核dialog是否显示
        //审核dialog数据
        auditMap: {},
        editDialogVisible: false, //编辑dialog是否显示
        //编辑dialog数据
        editMap: {},
        date: '', //日期
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData(page = 1) {
        if (this.date){
          this.searchParams.begin = this.date[0]
          this.searchParams.end = this.date[1]
        }
        // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
        this.page = page
        this.listLoading = true
        getPageList(this.page, this.limit, this.searchParams)
          .then(result => {
            if (result.success == true) {
              this.list = result.data.rows
              this.total = result.data.total
            }
            this.listLoading = false
          })
      },

      resetData() {
        this.searchParams = {}
        this.auditMap = {}
        this.editMap = {}
        this.date = ''
        this.fetchData()
      },

      // 审核页面dialog
      handleAudit(row) {
        this.$set(this.auditMap,'id',row.auditId)
        this.$set(this.auditMap,'userId',row.userId)
        this.$set(this.auditMap,'status',row.status)
        this.$set(this.auditMap,'opinion',row.opinion)
        this.auditMap.status = 1
        this.auditDialogVisible = true
      },
      // 修改页面dialog
      handleEdit(row) {
        this.$set(this.editMap,'id',row.auditId)
        this.$set(this.editMap,'mobile',row.mobile)
        this.$set(this.editMap,'email',row.email)
        this.$set(this.editMap,'name',row.name)
        this.$set(this.editMap,'intro',row.intro)
        this.$set(this.editMap,'career',row.career)
        this.$set(this.editMap,'sort',row.sort)
        this.editDialogVisible = true
      },
      // 关闭弹窗回调
      closeCallback() {
        this.auditDialogVisible = false
        this.editDialogVisible = false
        this.resetData()
      },
    }
  }
</script>

<style scoped>
  .audit-container{
    margin-top: 20px;
    margin-left: 15px;
  }
</style>
